D<template>
  <div class="dashboard-container">
    <h1>个人管理页面</h1>

    <div >
      <el-form label-width="20%" :rules="roles" :model="updateList" ref="ruleForm">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户名称"/>
        </el-form-item>

        <el-form-item label="用户密码" prop="userPassword">
          <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable
                    placeholder="请输入用户密码"/>

        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="updateList.sex" maxlength="1" show-word-limit style="width: 80%"
                    clearable placeholder="请输入性别"/>

        </el-form-item>
        <el-form-item label="电话号码" prop="phoneNumber">
          <el-input v-model="updateList.phoneNumber" maxlength="11" show-word-limit style="width: 80%" clearable
                    placeholder="请输入电话号码"/>

        </el-form-item>
        <el-form-item label="身份证" prop="identificationCard">
          <el-input v-model="updateList.identificationCard" maxlength="18" show-word-limit style="width: 80%" clearable placeholder="请输入身份证"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%"
                    placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="margin-left: 500px">
        <el-button type="primary" @click="updateUser('ruleForm')">保存</el-button>
        <el-button @click="checkUser('ruleForm')" style="margin-left: 200px">重置</el-button>
      </span>

      <!--      <el-button type="primary" @click="selectAll" style="width:100px;margin-left:40px">查询</el-button>-->
      <!--      <el-button @click="checkUser" style="width:100px;margin-left:40px">重置</el-button>-->
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import {selecctAllUser, update} from "@/api/user";
import row from "element-ui/packages/row";

export default {
  name: 'User',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      userId1: '',
      userName1: '',
      roleName1: '',
      updateList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      roles: {
        userName: [{required: true, trigger: 'blur', message: '用户名不能为空'},
          {min: 1, max: 20, message: '格式错误', trigger: 'blur'}],
        userPassword: [{required: true, trigger: 'blur', message: '密码不能为空'},
          {min: 1, max: 20, message: '格式错误', trigger: 'blur'}],
        identificationCard: [{required: true, trigger: 'blur', message: '身份证不能为空'},
          {min: 18, max: 18, message: '格式错误', trigger: 'blur'}],
        phoneNumber: [{required: true, trigger: 'blur', message: '手机号码不能为空'},
          {min: 11, max: 11, message: '格式错误', trigger: 'blur'}],
        sex: [{required: true, trigger: 'blur', message: '性别不能为空'}]
      }

    }

  },
  mounted() {
    this.selectAll()
  },
  methods: {
    selectAll() {
      // if (this.userId1==null || this.userName1==null || this.roleName1){
      //   this.disabled=no
      // }else
      console.log('userId:' + this.userId)
      console.log('userName:' + this.userName)
      console.log('roleName:' + this.roleName)
      selecctAllUser({
        userId: this.userId,
        userName: this.userName,
        roleName: this.roleName
      }).then(
        response => {
          console.log(response.data)
          this.updateList=response.data[0]
        }
      )
    },
    checkUser() {
      this.selectAll()
    },
    updateBound(row) {
      this.updateButtonController = true
      this.updateList = {
        userTableId: row.userTableId,
        userId: row.userId,
        roleId: row.roleId,
        userName: row.userName,
        userPassword: row.userPassword,
        sex: row.sex,
        phoneNumber: row.phoneNumber,
        identificationCard: row.identificationCard,
        remark: row.remark
      }
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            sex: this.updateList.sex,
            phoneNumber: this.updateList.phoneNumber,
            identificationCard: this.updateList.identificationCard,
            remark: this.updateList.remark
          }).then(
            response => {
              this.updateButtonController = false
              this.selectAll()
              this.$message.success("修改成功")
              this.updateBound(row)
            }
          )
        } else {
          return false
        }
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
